<template>
	<div class="mb20">
    <el-card shadow="never">
      <div class="mt20">
        <div id="monthlyPremium_" style="width: 600px; height:400px;"></div>
      </div>
    </el-card>
  </div>
</template>

<script setup name="monthlyPremium_">
  import * as echarts from 'echarts';
  import { onMounted, reactive, ref, toRefs } from 'vue';

  nextTick(() => {
    let chartDom = document.getElementById('monthlyPremium_');
    let myChart = echarts.init(chartDom);
    let option;

    option = {
      title: {
        text: '(万元)'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: [ '202301', '202302', '202303', '202304', '202305', '202306', '202307', '202308', '202309', '202310', '202311', '202312']
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      series: [
        {
          name: '月入账保费',
          type: 'bar',
          data: [53, 53, 14, 60, 72, 23, 78, 17, 29, 88, 30, 71]
        },
      ]
    };

    option && myChart.setOption(option);
  })
</script>

<style lang="scss" scoped>

</style>